<template>
  <div class="container">
    <van-nav-bar
      left-arrow
      title="个人信息"
      @click-left="$router.back()"
    ></van-nav-bar>
    <van-cell-group class="name">
      <van-uploader
        style="width:100%"
        :after-read="afterRead"
        :before-read="beforeRead"
      >
        <van-cell title="头像" :value="userInfo.photo" is-link center>
          <img class="img" :src="userInfo.photo" alt="" />
        </van-cell>
      </van-uploader>
      <van-cell
        @click="nameClick"
        title="昵称"
        :value="userInfo.name"
        is-link
      ></van-cell>
      <van-cell
        title="简介"
        :value="userInfo.intro === null ? '未填写' : userInfo.intro"
        is-link
      ></van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell
        title="性别"
        :value="{ 0: '男', 1: '女', 2: '未知' }[userInfo.gender]"
        is-link
        @click="genderClick"
      ></van-cell>
      <van-cell
        title="生日"
        :value="userInfo.birthday | formatTime"
        is-link
        @click="birthdayClick"
      ></van-cell>
    </van-cell-group>
    <van-action-sheet
      v-model="showGender"
      :actions="genders"
      cancel-text="取消"
      close-on-click-action
      @cencel="showGender = false"
      @select="genderSelect"
    >
    </van-action-sheet>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="birthdayConfirm"
        @cancel="showDate = false"
      />
    </van-popup>
    <div class="btn" @click="logout">退出登录</div>
    <Edit
      @closeEdit="showEdit = false"
      @setUserStore="setUserStore"
      :showEdit="showEdit"
      ref="edit"
    ></Edit>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { mapState, mapMutations } from 'vuex'
import { userProfilePatch, userPhoto } from '@/api/user.js'
import Edit from './components/edit.vue'
export default {
  name: '',
  components: { Edit },
  filters: {
    formatTime (time) {
      return dayjs(time).format('YYYY - MM - DD')
    }
  },
  computed: {
    // 用户信息
    ...mapState('user', ['userInfo'])
  },
  data () {
    return {
      showEdit: false,
      currentDate: new Date(),
      showGender: false,
      showDate: false,
      minDate: new Date('1950-01-01'),
      maxDate: new Date(),
      genders: [
        { name: '男', value: '0' },
        { name: '女', value: '1' }
      ]
    }
  },
  methods: {
    ...mapMutations('user', ['setToken', 'setUserOther']),
    // 退出登录
    logout () {
      this.$dialog
        .confirm({ title: '提示', message: '确定退出登录吗' })
        .then(() => {
          this.$router.push('/')
          this.setToken('')
          this.$toast.success('退出成功')
        })
        .catch(() => {})
    },
    async setUserStore (key, value) {
      await userProfilePatch({ [key]: value })
      this.setUserOther({ key, value })
    },
    // 点击性别时
    genderClick () {
      this.showGender = true
      this.genders[this.userInfo.gender].disabled = true
    },
    // 选择性别
    async genderSelect (item) {
      this.setUserStore('gender', item.value)
      this.genders[1 - this.userInfo.gender].disabled = false
      this.showGender = false
    },
    // 点击生日
    birthdayClick () {
      this.showDate = true
      this.currentDate = new Date(this.userInfo.birthday)
    },
    // 选择生日
    async birthdayConfirm () {
      this.showDate = false
      // const res = await userProfilePatch({ birthday: this.currentDate })
      this.setUserStore('birthday', this.currentDate)
      // console.log(res)
    },
    // 上传前
    beforeRead (file) {
      console.log(file)
      const isImg = file.type === 'image/png' || file.type === 'image/gif'
      const limit1m = file.size / 1024 / 1024 < 2
      if (!isImg) {
        this.$toast.fail('请上传png')
      }
      if (!limit1m) {
        this.$toast.fail('请上传1m')
      }
      return isImg && limit1m
    },
    // 上传成功后调用接口
    async afterRead (res) {
      const _formdata = new FormData()
      _formdata.append('photo', res.file)
      const response = await userPhoto(_formdata)
      console.log(response)
      this.setUserOther({ key: 'photo', value: response.data.photo })
    },
    nameClick () {
      this.showEdit = true
      this.$refs.edit.inputValue = this.userInfo.namep
    }
  },
  created () {
    // 调接口
    this.$store.dispatch('user/getUserInfo')
  }
}
</script>
<style scoped lang="less">
.container {
  position: relative;
  padding: 5px;
  background-color: #f8f8f8;
  .name {
    margin-bottom: 20px;
  }
  .btn {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    font-size: 16px;
    color: #e92142;
  }
}
.img {
  width: 60px;
  height: auto;
  border-radius: 50%;
}
::v-deep .van-uploader__input-wrapper {
  width: 100%;
}
</style>
